CSS 选择器

OK，先来普及一下选择器是什么：
假如你是造物主，你需要捏造一个个的人，而 HTML 文档中的一个个标签则是一个个人，你要从茫茫人海中挑选出一个或者一部分人来为他们声明他们的样式，这个时候你可能会需要一个工具，那就是选择器的功能，将你要选的一个或一部分标签选出来，并为他们声明样式。

简单选择器

标签选择器

根据标签名选出对应的标签，如：
假如想选出这个文档中所有的<p>标签，并声明它们包含的文字颜色应该是蓝色的：

1
2
3
p {
  color: blue;
}

类选择器

符号. + 类名：根据类名(class)选出对应的标签，如：
假如想选出这个文档中所有的属性class等于special的标签，并声明它们的宽度为 20px：

1
2
3
.special {
  width: 20px;
}

ID 选择器

符号# + ID 名：根据 ID 选出对应的标签，如：
假如想选出这个文档中的属性id等于special的标签，并声明它们的背景颜色为红色：

1
2
3
#special {
  background-color: red;
}

通配符选择器

符号*：用于选择所有元素

1
2
3
* {
  color: blue;
}

属性选择器[att]

[att]{ css code }: 用来选出某些带有特殊属性的标签。

  • 最普通的：
    假如需要选出带有disabled属性的标签，设置它们的背景颜色为蓝色：
1
2
3
[disabled] {
  background-color: blue;
}
  • =（等于）
    假如需要选出value属性等于abc的标签，设置它们的背景颜色为蓝色：
1
2
3
[value="abc"] {
  background-color: blue;
}
  • ~=（包含）
    假如需要选出class属性包含special字段的标签，设置它们的背景颜色为蓝色：
1
2
3
[class~="special"] {
  background-color: blue;
}
​```xml
<p class="special">能被选中</p>
<p class="special abc">能被选中</p>
<p class="abspecialc">不能被选中</p>
​```
  • |=（选择 xx 和 xx-）
    OK，此处不多说，都在代码里了：
1
2
3
[lang|="en"] {
  color: blue;
} //(这个属性选择器可以选择en以及en-这些标签)
​```xml
<p lang="en">能被选中</p>
<p lang="en-us">能被选中</p>
<p lang="en-au">能被选中</p>
<p lang="en fr">无法被选中</p>
<p lang="cy-en">无法被选中</p>
​```
  • ^=（匹配属性值开头）
    比如，你需要选出带有以https开头的href属性的标签：
1
2
3
[href^="https"] {
  ...;
}
  • $=(匹配属性值结尾)
    基本同上。
  • *=（匹配字符串）
    假如你需要找出href属性值的字符串中包含"jackie"的标签：
1
2
3
[href*="jackie"] {
  ...;
}
这和`~=`最大的区别就在于，同样是`[href~=jackie]`和`[href*=jackie]`，前者无法匹配到`href='jackie-anxis.com'`而后者可以，因为前者只能匹配到关键词前后都是空格的那些标签，比如`href='jackie anxis'`。

伪类选择器

  1. 可以用来选出具有特定样式的标签：
1
<a href="http://jackie-anxis.com/">叫Jackie的咸鱼</a>
如下面所示：`link`和`visited`属性的伪类选择器只用于链接标签，`hover`和`active`可用于其他标签。
​```css
a:link{color:gray;}    /*用于选中带有连接的a类*/
a:visited{color:red;}    /*用来表示访问过的链接*/
a:hover{color:green;}    /*鼠标悬停样式*/
a:active{color:green;}    /*鼠标点击样式*/
​```
如果对一个链接标签写以上四种不同的伪类选择器，那么需要按照以下顺序来写，不然会失效。除了以上介绍之外，其他常用的还有：
​```css
input:enabled{color:red;} /*处于可用状态的input标签*/
input:disabled{color:red;} /*处于不可用状态的input标签*/
input:checked{color:red;} /*处于选中或焦聚状态的input标签*/
​```
  1. 可以选出特定的子元素：
    比如，有如下结构：
1
2
3
<div>
	<p>1</p><p>2</p><p>3</p><p>4</p>
</div>
如果要选出这个结构中的第一个子元素`<p>1</P>`，并设置文字颜色为蓝色，可以这么写：
​```css
p:first-child{color:blue;}
​```
除此之外，还可以选最后一个子元素`:last-child{}`，或者自定义：`:nth-child(...){}`（括号中的...可以替换成odd，even或者一个表达式如3n+1等等）
当然，需要注意的是：<span style="color:orange">这个伪类选择器的头部（冒号前的部分）需要是子元素</span>，比如这个例子中，是`p:first-child`，意思是作为第一个子元素的p标签。
  1. 其他一些：
  • :only-child{}选中只有一个子元素的列表
  • dd:first-of-type{}选中 dd 这种标签的第一个元素(last-of-type, nth-of-type(...){},nth-last-of-type(...){})
  • 不常用的有这些：
    • :empty 选中没有子元素的标签
    • :root 选中<html>这个根标签
    • :not() 选中不包含某个选择器的元素,括号里放简单选择器
    • :target 选中一些被锚点选中为目标的目标元素
    • :lang() 选中 language 值是特殊值的某些元素

伪元素选择器

伪元素选择器就比较少，基本上就以下几个：

  • :first-line{}：向文本的首行设置特殊样式。比如：
1
2
3
4
p:first-line{
  color:#ff0000;
  font-variant:small-caps;
}
`first-line`只作用于块级元素，简单而言就是说，这个元素是会有很多行的。
  • :first-letter{}用于向文本的首字母设置特殊样式。同样也只适用于块级元素。
  • :before{}用于在元素的内容前面插入新内容。比如，需要在<p>元素之前插入一张图片：
1
2
3
p:before{
	content: url(logo.gif);
}
  • :after{}用于在元素后面插入新内容，原理同:before
  • :selection{}用于调整用户选中的内容：
1
2
3
4
:selection {
  color: red;
  background-color: #ccc;
}
  • 注释：伪元素选择器是可以和一般的选择器配合使用的，关于伪元素选择器更加详细的资料也可参考：CSS 伪元素 (Pseudo-elements)

组合选择器

后代选择器：空格

比如有如下结构：

1
2
3
4
5
6
<div class="main">
	<h2>标题1</h2>
	<div>
		<h2>标题2</h2>
	</div>
</div>

想要选出 main 类下面的所有 h2 标签，可以这么做：.main h2{}。
所以你懂了，后代选择器就是用来选出某个元素的这些后代元素的（不光是子元素，可能是孙元素）。空格 代表的是后代的意思。

子选择器：>

还是上面 1 里面那个例子，如果你只想选出“标题 1”而不想选出“标题 2”，那你就需要一个子选择器，子选择器>（大于号）只会选出直接的子元素：.main>h2{}

兄弟选择器：+和~

又比如有以下的结构：

1
2
3
4
5
<div>
	<h2>标题</h2>
	<p>段落1</p>
	<p>段落2</p>
</div>

我们姑且把div下的三个子元素分别称为老大（标题），_老二_（段落 1）和老三（段落 2）吧。

  • 第一种情况： 如果想要选出老大的第一个弟弟，也就是老二，可以通过兄弟选择器+来实现：h2+p{}。（你当然可以通过前面说过的伪元素选择器来实现）
    所以你懂了，a+b的意思就是选出 a 的第一个弟弟，而且这个弟弟还必须叫 b，否则就找不到。
  • 第二种情况：你想要找到老大的所有的标签为<p>弟弟，你就需要第二个兄弟选择器：~。可以这么做：h2~p{}。而且不一定要相邻，只要是标签h2的<p>弟弟都能找到。

选择器分组

很多有一样样式的选择器你可以写到一起，比如：

1
2
3
4
5
6
7
8
9
10
11
12
h1 {
  color: gray;
  font-family: sans-serif;
}
h2 {
  color: gray;
  font-family: sans-serif;
}
h3 {
  color: gray;
  font-family: sans-serif;
}

你可以写成：

1
2
3
4
5
6
h1,
h2,
h3 {
  color: gray;
  font-family: sans-serif;
}